import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Item extends Component {

  static propTypes = {
    onChangeStatus: PropTypes.func.isRequired,
    handleDelete:PropTypes.func.isRequired
  }

  state = {
    isHover: false
  }

  // 携带参数时使用高阶函数处理
  handleMouse = (flag) => {
    return () => {
      this.setState({
        isHover: flag
      })
    }
  }

  // 处理勾选、不勾选状态 向list触发改变状态
  handleChangeCheck = (id) => {
    return (event) => {
      this.props.onChangeStatus(id, event.target.checked);
    }
  }

  // 删除
  onHandleDelete = (id) => {
    if (window.confirm('确定删除吗？')) (
      this.props.handleDelete(id)
    )
  }

  render() {
    const { id, name, done } = this.props
    const { isHover } = this.state
    return (
      <li
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
        className="item"
        style={{background: isHover ? '#d3d7d4' : '#fff'}}
      >
        <label className="label">
          <input type="checkbox" checked={done} onChange={this.handleChangeCheck(id)} />
          { name }
        </label>
        <div style={{display: isHover ? 'block' : 'none'}} className="delete" onClick={() => this.onHandleDelete(id)}>删除</div>
      </li>
    )
  }
}
